¿Qué es SSG o Static Site Generation (SSG)? ¿Qué diferencias tiene con Server Side Rendering (SSR)? ¿Cuáles son sus beneficios? ¿Nuevos poderes con Edge Functions y las revalidaciones?

Miguel Segura

Hace 2 años3 minutos de lectura

¿Qué es SSG o Static Site Generation (SSG)? ¿Qué diferencias tiene con el Server Side Rendering (SSR)? ¿Cuáles son sus beneficios?¿Nuevos poderes con Edge Functions y las revalidaciones?

Alrededor del 2010 con la popularización de las Single Page Aplications (SPA) por lo mucho que facilitaban la creación de aplicaciones complejas, comenzaron a surgir nuevos retos en el mundo del desarrollo web.

Debido a que estas aplicaciones generan todo el HTML en el cliente, carecían de SEO, debido a que los "Web Crawlers", la herramienta que utilizan los buscadores para analizar el HTML de las páginas para indexarlas, solo veían un HTML vacío.

Actualmente, la mayor parte de los buscadores ya ejecuta el JavaScript necesario para indexar correctamente las páginas.

Otro problema era el excesivo tiempo de carga causado por todos los procesos adicionales necesarios para mostrar un sitio web.

Una solución a estos problemas fue el Server Side Rendering, donde el renderizado se realiza en el servidor, devolviendo únicamente archivos estáticos listos para mostrar en el navegador.

Cada que un usuario visita una página, el proceso de renderizado en el servidor se repite, y esto puede volverse sumamente costoso.

Si la página contiene demasiadas secciones dinámicas, con contenido específico para el usuario, tiene sentido emplear el Server Side Rendering para generar la página web para cada usuario.

Sin embargo, si el contenido siempre es el mismo como en la página de Términos y Condiciones o en un Blog como este, no hace sentido, generarlas una y otra vez.

Se le llama así al proceso de construir los archivos HTML de un sitio web al momento de hacer un deploy para que cuando un usuario acceda a una página, está este lista para ser mostrada en el navegador.

Con esta estrategia, todo el JavaScript y todas las peticiones a la API necesarias para generar el codigo HTML a mostrar, se realizan una sola vez al momento de ejecutar un deploy, después de ser procesadas y generadas, las páginas se guardan como estáticos y están disponibles velozmente.

Actualmente, no es necesario ejecutar un nuevo deploy cuando algo cambia, por ejemplo, Next.js nos permite crear o actualizar páginas estáticas después de haber creado su sitio gracias al Incremental Static Regeneration (ISR). Una función que nos permite conservar los beneficios de la generación estática mientras escala a millones de páginas.

Pros

Contras

Necesitas un servidor para procesar cada transacción, esto puede ser sumamente costoso.

No puedes cargar archivos tan rápidamente como lo harías un CDN.

Pros

Contras

Las ventajas de los sitios generados estáticamente sigue aumentando.

En las últimas versiones de Next.js contamos con la generación de páginas bajo demanda desde una API. Reduciendo aún más la cantidad de veces que una página es generada.

También Next.js añadió una nueva característica: Las Edge Functions. Una característica que nos permite generar múltiples archivos estáticos para una misma URL y escoger cuáles servir desde el CDN, obteniendo así los beneficios de los sitios estáticos con todo el poder y el dinamismo, pudiendo así personalizar tu sitio sin sacrificar velocidad o performance.

En este post te contamos como utilizar cada una de las estrategias con React y Next.js, tenemos una página de ejemplo donde puedes comparar la velocidad de carga de cada una de ellas.

Síguenos en redes sociales para que no te pierdas nuestros próximos post sobre estos temas y puedas optimizar tus sitios web al máximo aprovechando las últimas tecnologías.

¿Conoces otras herramientas que hagan esto? ¿Quieres que te enseñemos a usarlas?

Comparte el blog en Redes Sociales y cuéntanos que te gustaría continuar aprendiendo.

¡Sé valiente y No te rindas!